<template>
    <div id="Log">
        <filters
            block
            :form="searchForm"
            :filterData="filterData"
            @confirm="changePage(1)"
        />
        <div class="container">
            <DataTable
                rowKey="remindId"
                :tableData="Data"
                :tableColumn="tableColumn"
                :pageConfig="pageConfig"
                @refresh="getList"
            >
                <template #contentTitle="{row}">
                    <div :class="[row.status ? 'read': 'unread']">{{ row.contentTitle }}</div>
                </template>
            </DataTable>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component
export default class Log extends Vue {
    searchForm: any = {
        date: [],
        status: undefined
    }
    get filterData () {
        return {
            status: {
                label: '状态',
                type: 'select',
                width: 200,
                template: {
                    placeholder: '请选择状态',
                    clearable: true,
                    filterable: true,
                    options: [
                    {
                        label: '已读',
                        value: 1
                    },
                    {
                        label: '未读',
                        value: 0
                    }
                    ]
                }
            },
            date: {
                label: '发送时间',
                type: 'daterange',
                template: {
                    clearable: true
                }
            }
        }
    }
    Data: any[] = []
    tableColumn: any = {
        contentTitle: {
            label: '标题',
            slot: true
        },
        contentt: {
            label: '内容'
        },
        createName: {
            label: '发送人'
        },
        statuss: {
            type: 'status',
            flag: true,
            successTxt: '已读',
            failTxt: '未读',
            label: '状态'
        },
        createTime: {
            label: '发送时间'
        },
        action: {
            label: '操作',
            width: 300,
            template: [
                {
                    tag: 'a',
                    text: '详情',
                    show: (row: any) => !row.statuss,
                    callback: this.handleGo
                }
            ]
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    }
    adminId: any = ''

    init () {
        this.adminId = JSON.parse(localStorage.getItem('userInfo') || '{}').adminId;
        this.getList()
    }
    getSearchForm () {
        let searchForm = JSON.parse(JSON.stringify(this.searchForm));
        let { date } = searchForm;
        let { current, pageSize } = this.pageConfig
        let form = Object.assign(searchForm, {
            page: current,
            size: pageSize,
            startTime: (date && date[0]) || '',
            endTime: (date && date[1]) || '',
            adminId: this.adminId
        });
        delete form.date;
        return form;
    }
    getList () {
        let data = this.getSearchForm()
        this.$api.guangTengRemindMsgGetRemindMsgFetch(data).then((res: any) => {
            res.data.records.forEach((item: any) => {
                // title 是ant表格的表头属性名，不可使用
                item.contentTitle = item.title
                if(item.statuss == 1){
                    item.statuss = true
                }else{
                    item.statuss = false
                }
            })
            this.Data = res.data.records
            this.pageConfig.total = res.data.total
            if (!this.Data.length && this.pageConfig.current > 1) {
                --this.pageConfig.current
                this.getList()
            }
        })
    }
    changePage (val: number) {
        this.pageConfig.current = val
        this.getList()
    }
    hadBeenLooked (remindId: string) {
        return this.$api.guangTengRemindMsgRemindIsReadFetch({remindId})
    }
    handleGo (row: any) {
        const { typee, remindId } = row
        let url: string = ''
        switch (typee) {
            case 1:
                url = '/allot/task'
                break;
            case 2:
                url = '/acceptance/acceptanceList'
                break;
            case 3:
                url = '/acceptance/acceptanceList'
                break;
        }
        this.$router.push(url)
        this.hadBeenLooked(remindId)
    }
}
</script>

<style lang="scss" scoped>
.read {
    color: #999;
    &:hover {
        cursor: not-allowed;
    }
}
</style>
